<template>
  <div class="home">
    <div class="main">
      <div class="kv-bg">
        <Header></Header>
      </div>
      <a href="javascript:void(0)"
         class="kv_link"></a>
    </div>
    <div class="main_top">
      <div class="main_news">
        <div class="lunbo_box">
          <LunboMql></LunboMql>
        </div>
        <div class="news-center">
          <News></News>
        </div>
        <div class="download">
          <a href="javascript:void(0)"
             class="down_btn"></a>
          <a href="javascript:void(0)"
             class="guard_btn"></a>
          <a href="javascript:void(0)"
             class="tiyan_btn"></a>
        </div>
      </div>
      <div class="quick">
        <a href="http://localhost:8080/#/home/wzzs"
           target="_blank">
          <img src="//ossweb-img.qq.com/upload/webplat/info/yxzj/20191216/69027828783802.jpg"
               alt />
        </a>
        <a href="javascript:void(0)">
          <img src="//ossweb-img.qq.com/upload/webplat/info/yxzj/20181210/86638782789061.jpg"
               alt />
        </a>
        <a href="javascript:void(0)">
          <img src="//ossweb-img.qq.com/upload/webplat/info/yxzj/20181210/49934964177020.jpg"
               alt />
        </a>
        <a href="javascript:void(0)">
          <img src="//ossweb-img.qq.com/upload/webplat/info/yxzj/20190305/58993377293822.jpg"
               alt />
        </a>
      </div>
      <div class="main_item clear">
        <div class="strategy_center">
          <div class="item_header">
            <h3 class="item_title">内容中心</h3>
            <a href="javascript:void(0)"
               class="more_btn">更多</a>
          </div>
          <div class="content_center_tab">
            <div class="item_subnav">
              <span v-for="(item) in cenConlist"
                    :key="item.id">
                <a href="javascript:void(0)"
                   @mouseenter="tabTitMEnter(item.id)"
                   :class="`item_top ${item.id==orangeFlag?'orangeline':''}`">{{item.name}}</a>
                <span :class="item.id==3?'':'split'"></span>
              </span>
            </div>
            <div :class="`item_thirdnav item_thirdnav${1} tganime-fadein`"
                 id="item1">
              <div class="title">
                <a href="javascript:void(0)"
                   v-for="(item) in idFisrtCon"
                   :key="item.id"
                   :class="littileFlag===item.id?'littleTit':''"
                   @mouseenter="Amouseenter(item.id)">{{item.title}}</a>
              </div>
            </div>
            <div :class="`item_thirdnav item_thirdnav${2} tganime-fadein`"
                 id="item2"
                 style="display:none;">
              <div class="title">
                <a href="javascript:void(0)"
                   v-for="(item) in idFisrtCon"
                   :key="item.id"
                   :class="littileFlag===item.id?'littleTit':''"
                   @mouseenter="Amouseenter(item.id)">{{item.title}}</a>
              </div>
            </div>
            <div :class="`item_thirdnav item_thirdnav${3} tganime-fadein`"
                 id="item3"
                 style="display:none;"
                 @mouseleave="chooseHeroleave">
              <div class="title"
                   @mouseenter="chooseHeroEnter">
                <span class="item_hero">选择英雄</span>
                <div class="dropdown">
                  <div class="hero_type">
                    <ul class="types-ms">
                      <li v-for="item in conHerolist"
                          :key="item.id"
                          @click="chooseClass(item.id)">
                        <label>{{item.class}}</label>
                      </li>
                    </ul>
                  </div>
                  <div class="hero_list">
                    <ul class="herolist">
                      <li v-for="item in itemHeroList"
                          :key="item.id"
                          @click="heroClick(item.id)">
                        <img :src="item.src"
                             width="60px"
                             alt />
                        <span>{{item.title}}</span>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="item_content">
              <ul class="video_list">
                <li v-for="item in videolist"
                    :key="item.id">
                  <a href="javascript:void(0)"
                     @mouseenter="conImgEnter"
                     @mouseleave="conImgLeave"
                     @click="govideo(item.id)">
                    <img :src="item.src"
                         alt />
                    <span class="play-bar">
                      <em class="ico-play fl">{{item.video_playnum}}</em>
                      <em class="fr">{{item.video_time}}</em>
                    </span>
                    <span class="video-tit">{{item.video_title}}</span>
                    <div class="mask">
                      <span class="mask-ico"></span>
                    </div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="skin_center">
          <div class="item_header">
            <h3 class="item_title">英雄/皮肤</h3>
            <a href="javascript:void(0)"
               class="more_btn">更多</a>
          </div>
          <div class="silde">
            <div class="item_subnav1">
              <a href="javascript:void(0)">最新英雄</a>
              <span class="split"></span>
              <a href="javascript:void(0)">最新皮肤</a>
              <span class="split"></span>
              <a href="javascript:void(0)">周免英雄</a>
            </div>
            <div class="slide-content">
              <div class="skin-center-list">
                <div class="item_content"
                     style="width:33.3333%;">
                  <div class="new_hero">
                    <a href="javascript:void(0)">
                      <img src="https://game.gtimg.cn/images/yxzj/img201606/freehero/horizontal/525.jpg"
                           alt />
                    </a>
                    <div class="new_hero_bottom">
                      <p class="p1">新英雄：鲁班大师</p>
                      <p class="p2">上线时间：2019.11.28</p>
                    </div>
                  </div>
                  <div class="hero_pic_list">
                    <ul>
                      <li v-for="item in arrobj"
                          :key="item.id"
                          :data-title="item.title">
                        <a href="javascript:void(0)">
                          <img :src="item.img"
                               alt />
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
                <div class="item_content"
                     style="width:33.3333%;">
                  <div class="new_hero">
                    <a href="javascript:void(0)">
                      <img src="https://game.gtimg.cn/images/yxzj/img201606/freehero/horizontal/525.jpg"
                           alt />
                    </a>
                    <div class="new_hero_bottom">
                      <p class="p1">新英雄：鲁班大师</p>
                      <p class="p2">上线时间：2019.11.28</p>
                    </div>
                  </div>
                  <div class="hero_pic_list">
                    <ul>
                      <li v-for="item in arrobj"
                          :key="item.id"
                          :data-title="item.title">
                        <a href="javascript:void(0)">
                          <img :src="item.img"
                               alt />
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
                <div class="item_content"
                     style="width:33.3333%;">
                  <div class="hero_pic_list">
                    <ul>
                      <li v-for="item in arrobj"
                          :key="item.id"
                          :data-title="item.title">
                        <a href="javascript:void(0)">
                          <img :src="item.img"
                               alt />
                        </a>
                      </li>
                    </ul>
                  </div>
                  <p>
                    <span class="icon_watch"></span>限免时间
                    <em class="date">2019-12-23</em>至
                    <em class="date">2019-12-29</em>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="main-item clear">
        <div class="match_center fl">
          <div class="item_header">
            <h3 class="item_title">赛事中心</h3>
            <a href="javascript:void(0)"
               class="more_btn">更多</a>
          </div>
          <div class="item_subnav">
            <a href="javascript:void(0)"
               v-for="(item,index) in menu"
               :key="index"
               :class="{active:(isActive==item.value?true:false)}"
               @mouseenter="isActive = item.value;currentComp = item.comp">{{item.name}}</a>
          </div>
          <div class="item_content">
            <test1 :is="currentComp"></test1>
          </div>
        </div>
        <div class="match_schedule">
          <div class="item_header">
            <h3 class="item_title">KPL赛程</h3>
            <a href="javascript:void(0)"
               class="buy_ticket">购票</a>
            <a href="javascript:void(0)"
               class="more_btn">更多</a>
          </div>
          <div class="item_subnav clear">
            <span class="col1">时间</span>
            <span class="col1">战队</span>
            <span class="col2"></span>
            <span class="col1">战队</span>
          </div>
          <div class="item_content">
            <ul>
              <li>
                <span class="match_time">12-18 18:00</span>
                <span class="team_name">
                  <img src="//itea-cdn.qq.com/file/ingame/smoba/phpxM3keY19523062781576649242.png"
                       class="team_name_icon"
                       alt />
                  <em>冠军</em>
                </span>
                <span class="vs">VS</span>
                <span class="team_name">
                  <img src="//itea-cdn.qq.com/file/ingame/smoba/php3UDZ6Q18343850381576649251.png"
                       class="team_name_icon"
                       alt />
                  <em>之夜</em>
                </span>
              </li>
            </ul>
          </div>
          <div class="match_adver">
            <a href="javascript:void(0)">
              <img src="//ossweb-img.qq.com/upload/webplat/info/yxzj/20190909/6804810526912.jpg"
                   alt />
            </a>
          </div>
        </div>
      </div>

    </div>
    <div class="footer-wrap">
      <Footer></Footer>
    </div>
  </div>
</template>
<script>
import Footer from '../../components/Footer'
import Header from '../../components/Header'
import News from '../../components/News-mql'
import LunboMql from '../../components/Lunbo-mql'
import test1 from '../../components/Test-mql/index1'
import test2 from '../../components/Test-mql/index2'
import test3 from '../../components/Test-mql/index3'
import test4 from '../../components/Test-mql/index4'
import test5 from '../../components/Test-mql/index5'
import test6 from '../../components/Test-mql/index6'
import test7 from '../../components/Test-mql/index7'
import test8 from '../../components/Test-mql/index8'
export default {
  data: () => ({
    isActive: '1',
    currentComp: 'test1',
    activeName: 'first',
    list1: [],
    orangeFlag: 1,
    littileFlag: 201,
    cenConlist: [],
    idFisrtCon: [],
    videolist: [],
    // 内容中心英雄分类表
    conHerolist: [],
    // 根据分类渲染的英雄列表
    itemHeroList: [],
    menu: [
      { name: 'KPL', value: '1', comp: 'test1' },
      { name: '冠军杯', value: '2', comp: 'test2' },
      { name: 'KRKPL', value: '3', comp: 'test3' },
      { name: '城市赛', value: '4', comp: 'test4' },
      { name: '高校联赛', value: '5', comp: 'test5' },
      { name: 'TGA', value: '6', comp: 'test6' },
      { name: '微信游戏邀请赛', value: '7', comp: 'test7' },
      { name: '模拟战冬冠', value: '8', comp: 'test8' }
    ],
    arrobj: [
      { id: 523, img: '//game.gtimg.cn/images/yxzj/img201606/freehero/vertical/523.jpg', title: '西施' },
      { id: 518, img: '//game.gtimg.cn/images/yxzj/img201606/freehero/vertical/518.jpg', title: '马超' },
      { id: 522, img: '//game.gtimg.cn/images/yxzj/img201606/freehero/vertical/522.jpg', title: '曜' },
      { id: 506, img: '//game.gtimg.cn/images/yxzj/img201606/freehero/vertical/506.jpg', title: '云中君' }
    ]
  }),
  created () {
    this.getlist1()
    this.centerCon()
  },
  mounted () { },
  methods: {
    async getlist1 () {
      const { data, status } = await this.$axios('/getlist1')
      if (status !== 200) alert('数据请求不到')
      this.list1 = data
    },
    // 请求内容中心数据
    async centerCon () {
      const {
        data: { contentcenter, status }
      } = await this.$axios.get('/centercon')
      if (status !== 1) alert('数据请求不到')
      this.cenConlist = contentcenter
      this.cenConlist[0].content.forEach(el => {
        this.idFisrtCon.push(el)
      })
      // 选择英雄的英雄列表
      this.conHerolist = this.cenConlist[2].chooseherolist
      this.Amouseenter(101)
      this.chooseClass(340000)
    },
    // 内容中心tab栏鼠标移入事件
    tabTitMEnter (id) {
      this.orangeFlag = id
      // this.orangeFlag = e.target.dataset.id
      for (let i = 1; i < 4; i++) {
        document.querySelector(`.item_thirdnav${i}`).style.display = 'none'
      }
      document.querySelector(`.item_thirdnav${id}`).style.display = 'block'
      this.dataSolve(id)
      this.Amouseenter(this.idFisrtCon[0].id)
    },
    // 内容中心小标题处理
    dataSolve (id) {
      if (this.orangeFlag === '3') return
      this.idFisrtCon = []
      this.cenConlist[id - 1].content.forEach(el => {
        this.idFisrtCon.push(el)
      })
    },
    // 内容中心小标题鼠标移入事件，数据处理
    Amouseenter (id) {
      this.littileFlag = id
      this.idFisrtCon.forEach((el, index) => {
        if (el.id === id) {
          this.videolist = el.video_content
        }
      })
    },
    // 选择英雄选择栏鼠标移入显示
    chooseHeroEnter () {
      document.querySelector('.dropdown').style.display = 'block'
    },
    chooseHeroleave () {
      document.querySelector('.dropdown').style.display = 'none'
    },
    // 点击选择英雄分类
    chooseClass (id) {
      this.conHerolist.forEach(el => {
        if (el.id === id) {
          this.itemHeroList = el.heroinfo
        }
      })
    },
    // 点击英雄列表渲染相应的视频数据
    heroClick (id) {
      this.cenConlist[2].content.forEach(el => {
        if (el.id === id) {
          this.Amouseenter(id)
        }
      })
    },
    conImgEnter (e) {
      e.currentTarget.lastElementChild.style.display = 'block'
    },
    conImgLeave (e) {
      e.currentTarget.lastElementChild.style.display = 'none'
    },
    govideo (id) {
      this.$router.push(`/home/video/${id}`)
    }
  },
  components: {
    Header,
    Footer,
    LunboMql,
    News,
    test1,
    test2,
    test3,
    test4,
    test5,
    test6,
    test7,
    test8
  }
}
</script>

<style lang="less" scoped>
.footer-wrap {
  position: relative;
  bottom: -520px;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
ul,
p,
div,
li,
h1,
h2,
h3,
h4,
h5,
h6 span {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
li {
  list-style: none;
}
.main {
  .kv-bg {
    background-image: url('//ossweb-img.qq.com/upload/webplat/info/yxzj/20191217/61044512977831.jpg');
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    min-width: 1200px;
    height: 1100px;
    background-repeat: no-repeat;
    background-position: center top;
  }
}
.main_top {
  width: 1200px;
  margin: 0 auto;
  position: relative;
  top: 538px;
  min-height: 600px;
  z-index: 2;
  .main_news {
    width: 1200px;
    height: 342px;
    background: url('//game.gtimg.cn/images/yxzj/web201706/images/comm/rotate_bg.png') no-repeat left top;
  }
}

.kv_link {
  position: absolute;
  z-index: 3;
  width: 1200px;
  height: 440px;
  top: 90px;
  left: 50%;
  margin-left: -600px;
  outline: none;
  text-indent: -9999px;
  overflow: hidden;
}
.lunbo_box > {
  width: 604px;
}
.lunbo_box .el-tabs__item {
  font-size: 12px;
  color: #fff;
}
.news-center {
  width: 325px;
  height: 342px;
  overflow: hidden;
  padding: 0 17px;
  float: right;
  // background: saddlebrown;
  position: absolute;
  top: 0;
  right: 236px;
  ul > .new_list:first-child {
    font-size: 18px;
    width: 294px;
    height: 36px;
    line-height: 36px;
    padding-right: 15px;
    text-align: center;
    background: #414046;
    a {
      color: #f3c258;
    }
    em {
      display: none;
    }
  }
  .new_list {
    margin-left: 12px;
    width: 270px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin-bottom: 11px;
    a {
      width: 234px;
      color: #b8b9c5;
      font-size: 14px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      display: inline-block;
    }

    em {
      color: #999;
      font-size: 12px;
      font-style: normal;
      float: right;
    }
  }
  .is-top {
    color: #b8b9c5;
  }
}
.download {
  width: 236px;
  height: 342px;
  position: absolute;
  background: #999;
  top: 0;
  right: 0;
  .down_btn {
    display: block;
    width: 236px;
    height: 128px;
    background: url('//game.gtimg.cn/images/yxzj/web201706/images/comm/index.png') no-repeat 0px -219px;
  }
  .guard_btn {
    display: block;
    width: 236px;
    height: 106px;
    background: url('//game.gtimg.cn/images/yxzj/web201706/images/comm/index.png') no-repeat 0px -350px;
  }
  .tiyan_btn {
    display: block;
    width: 236px;
    height: 108px;
    background: url('//game.gtimg.cn/images/yxzj/web201706/images/comm/index.png') no-repeat 0px -461px;
  }
}
.quick {
  overflow: hidden;
  height: 134px;
  margin: 28px auto 34px;
  letter-spacing: -0.35em;
  margin-right: -15px;
  a {
    width: 291px;
    height: 134px;
    margin-right: 12px;
    overflow: hidden;
    display: inline-block;
    img {
      display: block;
      width: 100%;
      border: 0;
      border-radius: 2px 2px 2px 2px;
      transition: all 0.5s ease;
    }
    img:hover {
      transition: all 0.5s ease;
      transform: scale(1.1, 1.1);
    }
  }
}
.main_item {
  margin-bottom: 28px;
  .strategy_center {
    width: 872px;
    height: 528px;
    margin-right: 33px;
    float: left;
    // background: #414046;
    .item_header {
      position: relative;
      zoom: 1;
      margin-bottom: 16px;
      .item_title {
        background: url('//game.gtimg.cn/images/yxzj/web201706/images/comm/index.png') no-repeat;
        display: inline-block;
        width: 140px;
        height: 26px;
        background-position: 0 -106px;
        font-size: 22px;
        line-height: 25px;
        text-indent: 33px;
        font-weight: 600;
        letter-spacing: 1px;
      }
      .more_btn {
        position: absolute;
        top: 0;
        right: 0;
        padding-left: 22px;
        background: url('//game.gtimg.cn/images/yxzj/web201706/images/comm/index.png') no-repeat -252px 4px;
        color: #999;
        display: inline-block;
      }
    }
  }
  .item_subnav {
    margin-bottom: 5px;
    width: 872px;
    height: 32px;
    line-height: 29px;
    background: #f5f5f5;
    border-bottom: none;
    .split {
      width: 1px;
      height: 20px;
      overflow: hidden;
      float: left;
      background: #e1e1e1;
      display: inline-block;
      margin: 5px 0 0px;
    }
    a {
      width: 289px;
      display: block;
      float: left;
      font-size: 14px;
      color: #999;
      text-align: center;
      border-bottom: 3px solid #f5f5f5;
    }
    // a:hover {
    //   border-bottom: 3px solid #f3c258;
    //   color: #333333;
    // }
    .orangeline {
      border-bottom: 3px solid #f3c258;
      color: #333333;
    }
  }
  .item_thirdnav {
    position: relative;
    zoom: 1;
    height: 26px;
    line-height: 26px;
    padding: 8px 0 9px;
    // .title:hover + .dropdown{
    //   display: block;
    // }
    .title {
      height: 26px;
      overflow: hidden;
      text-indent: 8px;
      cursor: pointer;
      .item_hero {
        display: inline-block;
        padding-right: 20px;
        background: url('')
          no-repeat right center;
      }
      a {
        height: 24px;
        line-height: 24px;
        padding: 0 13px 0 8px;
        border: 1px solid #e5e5e5;
        border-radius: 10px;
        background: #f5f5f5;
        font-size: 14px;
        color: #333;
        margin-right: 8px;
        display: block;
        float: left;
      }
      // a:hover {
      //   border-color: #f3c258;
      //   background: #f3c258;
      //   color: #fff;
      // }
      .littleTit {
        border-color: #f3c258;
        background: #f3c258;
        color: #fff;
      }
    }
    .dropdown {
      display: none;
      position: absolute;
      top: 42px;
      left: 0;
      z-index: 100;
      background: #fff;
      border: 1px solid #e5e5e5;
      height: 337px;
      .hero_list {
        float: left;
        width: 715px;
        height: 310px;
        overflow-y: auto;
        padding: 12px 22px;
        li {
          width: 60px;
          float: left;
          text-align: center;
          margin: 0 26px 26px 0;
          font-size: 14px;
          cursor: pointer;
          img {
            display: block;
            width: 60px;
            height: 60px;
            border: 0;
            border-radius: 2px 2px 2px 2px;
          }
        }
      }
      .hero_type {
        float: left;
        width: 78px;
        text-align: center;
        background: #f5f5f5;
        height: 337px;
        li {
          height: 42px;
          line-height: 42px;
          cursor: pointer;
        }
        li:hover {
          background: #f3c258;
          color: #fff;
        }
      }
    }
  }

  .item_content {
    .mask {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 209px;
      height: 125px;
      background-color: #333;
      opacity: 0.5;
      .mask-ico {
        width: 40px;
        height: 40px;
        display: inline-block;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -20px;
        margin-top: -20px;
        background-repeat: no-repeat;
        background-image: url('http://game.gtimg.cn/images/yxzj/match/center2018/images/bigwatch.png');
      }
    }
    li {
      float: left;
      width: 209px;
      margin: 0 9px 30px 0;
      position: relative;
      a {
        position: relative;
        display: block;
        width: 212px;
        img {
          width: 209px;
          height: 125px;
          display: block;
          border: 0;
          border-radius: 2px 2px 2px 2px;
        }
        .play-bar {
          position: absolute;
          top: 104px;
          left: 0;
          width: 189px;
          height: 22px;
          line-height: 22px;
          padding: 0 10px;
          color: #fff;
          background: rgba(0, 0, 0, 0.6);
          font-size: 12px;
          border-radius: 0 0 2px 2px;
          em {
            font-style: normal;
          }
          .ico-play {
            background: url('//game.gtimg.cn/images/yxzj/web201706/images/comm/index.png') no-repeat;
            display: inline-block;
            padding-left: 15px;
            background-position: -256px -59px;
          }
        }
        .video-tit {
          display: block;
          height: 40px;
          overflow: hidden;
          color: #333333;
          margin-top: 10px;
          font: 14px/1.5 'Microsoft YaHei', Tahoma, 'simsun', sans-serif;
        }
      }
    }
  }
  .skin_center {
    width: 295px;
    height: 528px;
    float: left;
    // background: #999;
    .silde {
      overflow: hidden;
      .item_subnav1 {
        .split {
          width: 1px;
          height: 20px;
          overflow: hidden;
          float: left;
          background: #e1e1e1;
          display: inline-block;
          margin: 5px 0 0px;
        }
        width: 293px;
        margin-bottom: 19px;
        position: relative;
        overflow: hidden;
        height: 32px;
        line-height: 29px;
        background: #f5f5f5;
        border-bottom: none;
        a {
          width: 97px;
          display: block;
          float: left;
          font-size: 14px;
          color: #999;
          text-align: center;
          border-bottom: 3px solid #f5f5f5;
        }
        a:hover {
          border-bottom: 3px solid #f3c258;
          color: #333333;
        }
      }
      .slide-content {
        .skin-center-list {
          width: 300%;
          transform: translate(-66.6666%, 0px);
          transition: all 0.3s ease;
          .item_content {
            float: left;
            display: block;
            p {
              color: #999999;
              font-size: 12px;
              text-align: right;
              .icon_watch {
                background: url(//game.gtimg.cn/images/yxzj/web201706/images/comm/index.png) no-repeat;
                display: inline-block;
                width: 14px;
                height: 14px;
                background-position: -256px -43px;
                margin-right: 10px;
                vertical-align: middle;
              }
              .date {
                font-style: normal;
              }
            }
            .hero_pic_list {
              li:hover:after {
                content: attr(data-title);
                position: absolute;
                top: 0;
                left: 0;
                background: rgba(0, 0, 0, 0.88);
                width: 68px;
                height: 173px;
                line-height: 173px;
                text-align: center;
                color: #f3c258;
                font-size: 14px;
              }
              li {
                position: relative;
                width: 68px;
                height: 173px;
                float: left;
                margin: 0 5px 12px 0;
                cursor: pointer;
                vertical-align: middle;
                display: table-cell;
                img {
                  display: block;
                  border: 0;
                  border-radius: 2px 2px 2px 2px;
                  width: 68px;
                  height: 173px;
                }
                img:hover + .hero_mask {
                  display: block;
                }
                .hero_mask:hover + .hero_name {
                  display: block;
                }
              }
            }
            .new_hero {
              display: block;
              width: 294px;
              height: 224px;
              border-radius: 2px;
              margin-bottom: 10px;
              a {
                img {
                  display: block;
                  border: 0;
                  border-radius: 2px 2px 2px 2px;
                  width: 295px;
                  height: 156px;
                }
              }
              .new_hero_bottom {
                padding: 10px 15px;
                height: 47px;
                border: 1px solid #e5e5e5;
                border-top: none;
                border-radius: 0 0 2px 2px;
                .p1 {
                  font-size: 18px;
                  color: #333333;
                  font-weight: bold;
                  text-align: left;
                }
                .p2 {
                  text-align: left;
                  color: #999999;
                  font-size: 12px;
                }
              }
            }
          }
        }
      }
    }
    .item_header {
      position: relative;
      zoom: 1;
      margin-bottom: 16px;
      .more_btn {
        position: absolute;
        top: 0;
        right: 0;
        padding-left: 22px;
        background: url(//game.gtimg.cn/images/yxzj/web201706/images/comm/index.png) no-repeat -252px 4px;
        color: #999;
        display: inline-block;
      }
      .item_title {
        background: url(//game.gtimg.cn/images/yxzj/web201706/images/comm/index.png) no-repeat;
        display: inline-block;
        font-size: 22px;
        line-height: 25px;
        text-indent: 33px;
        font-weight: 600;
        letter-spacing: 1px;
        width: 140px;
        height: 25px;
        background-position: 0 -144px;
      }
    }
  }
}
.main-item {
  height: 777.6px;
  margin-bottom: 28px;
  .match_center {
    margin-right: 33px;
    width: 872px;
    .item_header {
      position: relative;
      zoom: 1;
      margin-bottom: 16px;
      .more_btn {
        position: absolute;
        top: 0;
        right: 0;
        padding-left: 22px;
        background: url(//game.gtimg.cn/images/yxzj/web201706/images/comm/index.png) no-repeat -252px 4px;
        color: #999;
        display: inline-block;
      }
      .item_title {
        background: url(//game.gtimg.cn/images/yxzj/web201706/images/comm/index.png) no-repeat;
        display: inline-block;
        width: 140px;
        height: 24px;
        background-position: 0 -184px;
        font-size: 22px;
        line-height: 25px;
        text-indent: 33px;
        font-weight: 600;
        letter-spacing: 1px;
      }
    }
    .item_subnav {
      overflow: hidden;
      margin-bottom: 19px;
      width: 872px;
      height: 32px;
      line-height: 29px;
      background: #f5f5f5;
      border-bottom: none;
      .active {
        border-bottom: 3px solid #f3c258;
        color: #333333;
      }
      a {
        width: auto;
        padding: 0 27px;
        display: block;
        float: left;
        font-size: 14px;
        color: #999;
        text-align: center;
        border-bottom: 3px solid #f5f5f5;
      }
    }
    .item_content {
      display: block;
      animation: fadeInFromNone 0.4s ease-in-out;
      animation-fill-mode: forwards;
    }
  }
}
.match_adver {
  width: 293px;
  height: 159px;
  margin-bottom: 15px;
  a {
    display: block;
    img {
      width: 293px;
      height: 159px;
      display: block;
      border: 0;
      border-radius: 2px 2px 2px 2px;
    }
  }
}
.match_schedule {
  width: 295px;
  float: left;
  .item_content {
    ul {
      margin-bottom: 21px;
      li {
        height: 67px;
        line-height: 67px;
        border-bottom: 1px solid #e5e5e5;
        .vs {
          font-size: 14px;
          width: 43px;
          color: #f3c258;
          text-align: center;
          vertical-align: top;
        }
        .team_name {
          display: inline-block;
          width: 79px;
          height: 67px;
          color: #333333;
          font-size: 14px;
          text-align: center;
          .team_name_icon {
            overflow: hidden;
            display: block;
            width: 25px;
            height: 25px;
            margin: 10px auto 0 auto;
            border-radius: 50%;
            border: 0;
          }
        }
        span {
          display: inline-block;
        }
        em {
          display: inline-block;
          font-size: 12px;
          line-height: 24px;
          vertical-align: top;
          font-style: normal;
        }
        .match_time {
          width: 80px;
          color: #333333;
          font-size: 12px;
          text-align: center;
          vertical-align: top;
        }
      }
    }
  }
  .item_subnav {
    width: 293px;
    margin-bottom: 0;
    height: 32px;
    line-height: 29px;
    background: #f5f5f5;
    border-bottom: none;
    span {
      display: block;
      float: left;
      font-size: 14px;
      color: #999;
      text-align: center;
    }
    .col2 {
      width: 43px;
      height: 29px;
      margin-right: 0;
      background: #f5f5f5;
    }
    .col1 {
      width: 83px;
      margin-right: 0;
    }
  }
  .item_header {
    position: relative;
    zoom: 1;
    margin-bottom: 16px;
    .item_title {
      background: url(//game.gtimg.cn/images/yxzj/web201706/images/comm/index.png) no-repeat;
      display: inline-block;
      width: 140px;
      height: 24px;
      background-position: -157px -106px;
      white-space: nowrap;
      font-size: 22px;
      line-height: 25px;
      text-indent: 33px;
      font-weight: 600;
      letter-spacing: 1px;
    }
    .buy_ticket {
      position: absolute;
      top: 0;
      right: 68px;
      padding-left: 22px;
      background: url(//game.gtimg.cn/images/yxzj/web201706/images/comm/index.png) no-repeat -243px -85px;
      color: #323235;
      width: 70px;
      height: 22px;
      border: 1px solid #f3c258;
      border-radius: 3px;
      box-sizing: border-box;
      text-indent: 10px;
      line-height: 19px;
    }
    .more_btn {
      position: absolute;
      top: 0;
      right: 0;
      padding-left: 22px;
      background: url(//game.gtimg.cn/images/yxzj/web201706/images/comm/index.png) no-repeat -252px 4px;
      color: #999;
      display: inline-block;
    }
  }
}
.clear:after {
  clear: both;
  content: ' ';
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}
</style>
